<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类的操作</title>
    <style>
        .b1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        .b2{
            /* width: 200px; */
            height: 200px;
            background-color: darkcyan;
        }
    </style>
</head>
<body>
    <button id="btn01">按钮额</button>
    <br><br>
    <div id="box1" class="b1 b2"></div>
    <!-- <div class="b2" id="box2"></div> -->
</body>
</html>
<script>
    window.onload = function(){
        // 获取box1
        var box1 = document.getElementById("box1"); 
        // 获取btn01
        var btn01 = document.getElementById("btn01");

        // 为 btn01绑定单击响应函数
        btn01.onclick = function(){
            // 修改box 的样式
            /*
                通过 style 属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
                    这样的执行性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便

            */
            // box1.style.height = 200+"px";

            /*
                我希望一行代码可以修改多个样式
            */

            // 修改box 的 class属性
            /*
                我们可以通过修改元素的 class 属性来间接的修改样式
                这样一来，我们只需要修改一次，即可同时修改多个样式
                    浏览器只需要重新渲染页面一次，性能比较好
                    并且这种方式，可以使 表现和行为 进一步的分离
            */
            // box1.className += " b2";
            // addClass(box1,"b2");
            // alert(hasClass(box1,"b2"));
            // removeClass(box1,"b2");
            // toggleClass(box1,"b2");

            /*
                box1.classList.add("b1")      添加类值b1⭐📌📌
                box1.classList.remove("b1")   移出类值b1⭐📌📌
                box1.classList.replace("b1","b2")  替换 将b1换掉，将b2加上⭐📌📌
                box1.classList.toggle("b1")   如果有，则删除b1。如果没有，则添加b1⭐📌📌
            */

            var csn = ["b3","b4"];
            box1.classList.add(csn[0],csn[1]);
        };
    };
    // 定义一个函数，用来向一个元素中添加指定的 class 属性值 ⭐⭐📌
    /*
        参数： 
            obj 要添加 class 属性的元素
            cn  要添加的 class 值
    */
    function addClass(obj, cn,){
        // 检查 obj 中是否含有 cn
        if(!hasClass(obj,cn)){
            obj.className += ""+cn;
        }
        
    }
    
    /*
        判断一个元素中是否含有指定的 class 属性值 ⭐⭐📌
            如果右该class 返回true 否则返回 false
    */
    function hasClass(obj, cn){
        // 判断 obj中有没有 cn class
        // 创建一个正则
        // var reg = /\bb2\b/;
        var reg = new RegExp("\\b"+cn+"\\b");


        return reg.test(obj.className);
    }

    // 删除一个元素中的指定的 class 属性 ⭐⭐📌
    function removeClass(obj,cn){
        // 创建一个正则表达式
        var reg = new RegExp("\\b"+cn+"\\b");

        // 删除 class
        obj.className = obj.className.replace(reg,"");
    }

    /*
        toggleClass可以用来切换一个类 ⭐⭐📌
            如果元素中具有该类，则删除
            如果元素中没有该类，则添加
    */
    function toggleClass(obj, cn){
        if(hasClass(obj,cn)){
            // 有，则删除
            removeClass(obj,cn);
        }else{
            // 没有，则添加
            addClass(obj,cn);
        }
    }
</script>